<template>
  <view class="content">
    <view v-if="posInfo">
      <view class="pos_body">
        <view class="pos_content">
          <p>上一次停放地点:</p>
          <view class="body">
            <label>具体位置 : </label>
            <text>{{ posInfo.address }}</text>
          </view>
          <br />
          <view class="body">
            <label>具体地点 : </label>
            <text>{{ posInfo.name }}</text>
          </view>
        </view>
      </view>
      <view class="pos_head">
        <button
          type="primary"
          class="pos_btn"
          @click="showPos(posInfo.latitude, posInfo.longitude)"
        >
          上一次停放位置
        </button>
      </view>
    </view>
    <view v-else>
      <view class="pos_none">
        <text>暂无上一次使用记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "showPos",
  props: {
    posInfo: Object,
  },
  created() {
    console.log("------show created------");
  },
  mounted() {
    console.log("------show mounted------");
    // this.showPos(this.posInfo.latitude, this.posInfo.longitude);
  },
  data() {
    return {};
  },
  methods: {
    showPos(latitude, longitude) {
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        success: function () {
          console.log("success");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 45vh;
  // padding: 15px;
  position: relative;

  .pos_body {
    // position: relative;
    padding: 15px;
    .pos_content {
      color: #595959;

      p {
        font-size: 36rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
      }
      .body {
        display: flex;
        justify-content: space-around;
      }
      label {
        width: 20%;
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
      }
      text {
        width: 70%;
        font-size: 30rpx;
        // padding-left: 20px;
        padding-bottom: 20rpx;
      }
    }
  }
  .pos_head {
    height: 20vh;
    position: relative;
    .pos_btn {
      width: 60%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      text-align: center;
    }
  }

  .pos_none {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    text-align: center;
    text {
      color: rgb(206, 204, 204);
      font-size: 50rpx;
    }
  }
}
</style>